<script lang="ts">
  import { onMount } from 'svelte';
  import Index from './routes/index.svelte';
  import TaskView from './routes/tasks/TaskView.svelte';
  import DebugView from './routes/debug.svelte';
  import Changelog from './routes/changelog.svelte';
  import LanguageSelector from './lib/i18n/Locale.svelte';
  import { t } from './lib/i18n';
  import { initAnalytics, trackPageView } from './lib/analytics';
  
  // 简单的路由系统
  let currentRoute = '';
  
  function navigate(path: string) {
    window.history.pushState({ path }, '', path);
    updateRoute();
  }
  
  function updateRoute() {
    currentRoute = window.location.pathname;
    
    // 跟踪页面访问
    trackPageView(currentRoute, getPageTitle(currentRoute));
  }
  
  // 获取页面标题
  function getPageTitle(route: string): string {
    const titles: Record<string, string> = {
      '/': String($t('upload.title')),
      '/debug': String($t('common.debug')),
      '/changelog': String($t('common.changelog'))
    };
    
    if (route.startsWith('/tasks/')) return String($t('tasks.title'));
    return titles[route] || String($t('app.title'));
  }
  
  // 监听浏览器前进/后退
  onMount(() => {
    // 初始化分析工具
    initAnalytics();
    
    updateRoute();
    
    window.addEventListener('popstate', () => {
      updateRoute();
    });
    
    // 拦截所有导航链接
    document.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'A' && target.hasAttribute('href')) {
        const href = target.getAttribute('href');
        // 只处理内部链接
        if (href && href.startsWith('/') && !href.startsWith('//') && !target.hasAttribute('target')) {
          e.preventDefault();
          navigate(href);
        }
      }
    });
    
    return () => {
      window.removeEventListener('popstate', updateRoute);
    };
  });
</script>

<header>
  <div class="header-content">
    <div class="logo">
      <h1>{$t('app.title')}</h1>
      <p>{$t('app.subtitle')}</p>
    </div>
    <nav>
      <ul>
        <li><a href="/" class:active={currentRoute === '/'}>{$t('upload.title')}</a></li>
        <li><a href="/tasks/" class:active={currentRoute.startsWith('/tasks/')}>{$t('tasks.title')}</a></li>
        <li><a href="/changelog" class:active={currentRoute === '/changelog'}>{$t('common.changelog')}</a></li>
        <li><a href="/debug" class:active={currentRoute === '/debug'}>{$t('common.debug')}</a></li>
        <li><a href="https://www.skstudio.cn?utm_source=app_framework_analyzer&utm_medium=referral&utm_campaign=nav_link" target="_blank" rel="noopener noreferrer">{$t('common.about_us')}</a></li>
      </ul>
    </nav>
    <div class="language-switch">
      <LanguageSelector />
    </div>
  </div>
</header>

<main>
  {#if currentRoute === '/'}
    <Index />
  {:else if currentRoute.startsWith('/tasks/')}
    <TaskView />
  {:else if currentRoute === '/changelog'}
    <Changelog />
  {:else if currentRoute === '/debug'}
    <DebugView />
  {:else}
    <div class="not-found">
      <h1>404 - {$t('common.error')}</h1>
      <p>{$t('common.error')}</p>
      <button on:click={() => navigate('/')}>{$t('common.back')}</button>
    </div>
  {/if}
</main>

<footer class="app-footer">
  <p>{$t('app.copyright')}</p>
</footer>

<style>
  :global(body) {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f5f5f5;
  }
  
  header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo h1 {
    margin: 0;
    font-size: 1.5rem;
  }
  
  .logo p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
  }
  
  nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav li {
    margin: 0 1rem;
  }
  
  nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
  }
  
  nav a.active, nav a:hover {
    border-color: white;
  }
  
  main {
    min-height: calc(100vh - 150px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .not-found {
    text-align: center;
    padding-top: 5rem;
  }
  
  .not-found h1 {
    font-size: 2.5rem;
    color: #333;
  }
  
  .not-found button {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
  }
  
  .not-found button:hover {
    background-color: #3a80d2;
  }
  
  .language-switch {
    margin-left: 1rem;
  }
  
  .app-footer {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    padding: 1rem;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    margin-top: 2rem;
  }
  
  @media (max-width: 768px) {
    .header-content {
      flex-direction: column;
      align-items: flex-start;
    }
    
    nav {
      margin: 1rem 0;
    }
    
    .language-switch {
      align-self: flex-end;
      margin-top: -2rem;
    }
  }
</style> 
